<template>
    <div class="resume-container">
      <!-- 普通预览模式 -->
      <div class="resume-viewer">
        <div class="pdf-container">
          <object
            v-if="pdfUrl"
            :data="pdfUrl + '#toolbar=0&navpanes=0&scrollbar=0'"
            type="application/pdf"
            width="100%"
            height="100%"
          >
          </object>
          <!-- 加载中状态 -->
          <div v-else class="loading">
            加载中...
          </div>
        </div>
        
        <!-- 全屏按钮 -->
        <div v-if="pdfUrl" class="control-btn" @click="openFullscreen" title="全屏查看">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
          </svg>
        </div>
      </div>
  
      <!-- 全屏预览模态框 -->
      <div v-if="isFullscreen" class="fullscreen-modal">
        <div class="modal-content">
          <object
            :data="pdfUrl + '#toolbar=0&navpanes=0&scrollbar=0'"
            type="application/pdf"
            width="100%"
            height="100%"
          >
          </object>
          
          <!-- 关闭按钮 -->
          <div class="close-btn" @click="closeFullscreen" title="关闭全屏">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <line x1="18" y1="6" x2="6" y2="18"></line>
              <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue'
//   import axios from 'axios'
  
  const pdfUrl = ref('')
  const isFullscreen = ref(false)
  
  // 获取PDF文件URL
  const fetchPDFUrl = async () => {
    // try {
    //   const response = await axios.get('/api/resume')
    //   // 假设后端返回的数据格式是 { url: 'xxx' }
    //   pdfUrl.value = response.data.url
    // } catch (err) {
    //   console.error('获取PDF地址失败:', err)
    // }
  }
  
  // 打开全屏预览
  const openFullscreen = () => {
    isFullscreen.value = true
    document.body.style.overflow = 'hidden' // 防止背景滚动
  }
  
  // 关闭全屏预览
  const closeFullscreen = () => {
    isFullscreen.value = false
    document.body.style.overflow = 'auto'
  }
  
  onMounted(() => {
    fetchPDFUrl()
  })
  </script>
  
  <style scoped>
  .resume-container {
    width: 100%;
    height: 100%;
    padding: 12px;
  }
  
  .resume-viewer {
    position: relative;
    width: 100%;
    height: 800px;
    border-radius: 4px;
    overflow: hidden;
  }
  
  .pdf-container {
    width: 100%;
    height: 100%;
  }
  
  /* 全屏按钮样式 */
  .control-btn {
    position: fixed;
    right: 40px;
    bottom: 40px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: all 0.3s;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
  
  .control-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
  }
  
  /* 全屏模态框 */
  .fullscreen-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .modal-content {
    position: relative;
    width: 95%;
    height: 95%;
    background: white;
    border-radius: 8px;
    overflow: hidden;
  }
  
  /* 关闭按钮 */
  .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: all 0.3s;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
  
  .close-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
  }
  
  /* iframe 样式 */
  object {
    border: none;
    background-color: transparent;
  }
  </style>